import React, { useState, useEffect } from "react";
import { connect } from 'umi';
import { Radio, Row, Col, Space, Tabs, Card, Tooltip, DatePicker, Image, Descriptions, Spin } from 'antd';
import { Line } from '@ant-design/charts';
import live_icon from '@/assert/image/live_icon.png'
import look_icon from '@/assert/image/look_icon.png'
import reload_icon from '@/assert/image/reload_icon.png'
import live_flow_icon from '@/assert/image/live_flow_icon.png'
import TableDataBlock from '@/components/TableDataBlock'
import { InfoCircleOutlined, QuestionCircleOutlined } from '@ant-design/icons'
import { goodsType_status } from '@/common/contact'
import moment from 'moment';
import PopImgShow from "@/components/PopImgShow";
const { RangePicker } = DatePicker;
const LiveAnalysis = (props) => {
  const { dispatch, id, liveDataObj, loading } = props
  const [data, setData] = useState([])
  const [userRadio, setUserRaiod] = useState('admin')
  useEffect(() => {
    if (id) {
      fetchTrendData()

    }
  }, [id])
  const dateFormat = 'YYYY-MM-DD'; // 定义你需要的时间格式
  const fetchTrendData = (data) => {
    dispatch({
      type: 'liveStreaming/fetchOnlineUserTrendData',
      payload: {
        startTime: moment().subtract('7', 'day').format(dateFormat),
        endTime: moment().format(dateFormat),
        goodsId: id,
        goodsType: 'directLive',
        ...data,
      },
      callback: (e) => {
        const { timeDataList = [] } = e
        setData(timeDataList.map(item => {
          return {
            ...item,
            dataValue: parseInt(item.dataValue)
          }
        }))
      }
    })
  }

  const config = {
    data: data,
    xField: 'createTime',
    yField: 'dataValue',

    xAxis: {
      min: 0,
    },
    tooltip: {
      customContent: (title, items) => {
        console.log(title, items)
        if (items && items[0]) {
          const { value } = items[0]
          return <div style={{ padding: '8px 12px' }}>{`观看人数${value}`}</div>
        }
        else {
          return null
        }
      }
    },
    // label: {},
    // point: {
    //   size: 5,
    //   shape: 'diamond',
    //   style: {
    //     fill: 'white',
    //     stroke: '#5B8FF9',
    //     lineWidth: 2,
    //   },
    // },
    // tooltip: {
    //   showMarkers: false,
    // },
    // state: {
    //   active: {
    //     style: {
    //       shadowBlur: 4,
    //       stroke: '#000',
    //       fill: 'red',
    //     },
    //   },
    // },
    // interactions: [
    //   {
    //     type: 'marker-active',
    //   },
    // ],
  };
  const searchItems = [
    // {
    //   label: '配置方式',
    //   name: 'liveStatus',
    //   type: 'select',
    //   select: {
    //     0: '暂未开始',
    //     1: '直播中',
    //     2: '已结束',
    //   },
    // },

  ];
  const getColumns = [
    {
      title: '商品名称',
      dataIndex: 'goodsName',
    },
    {
      title: '商品类型',
      dataIndex: 'goodsType',
      render: (e) => (goodsType_status[e])
    },
    {
      title: '封面',
      dataIndex: 'cover',
      render: (e) => {
        return <PopImgShow width={40} url={e}></PopImgShow>
      }
    },
    {
      title: '浏览数',
      dataIndex: 'viewAmount',
    },
    {
      title: '浏览人数',
      dataIndex: 'viewUserAmount',
    },
    {
      title: '销售数量',
      dataIndex: 'saleAmount',
    },
    {
      title: '购买人数',
      dataIndex: 'saleUserAmount',
    },
    {
      title: '销售金额',
      dataIndex: 'saleMoney',
    },
    {
      title: '退款金额',
      dataIndex: 'returnMoney',
    },
    {
      title: '退款金额',
      dataIndex: 'returnMoney',
    },
    {
      title: '新用户数量',
      dataIndex: 'newUserAmount',
    },
    {
      title: '退款数量',
      dataIndex: 'returnAmount',
    },
  ];
  const getUserColumns = [
    {
      title: '姓名',
      dataIndex: 'username',
    },
    {
      title: '头像',
      dataIndex: 'profile',
      render: (e) => {
        return <PopImgShow width={40} url={e}></PopImgShow>
      }
    },
    {
      title: '邀请人数',
      dataIndex: 'inviteAmount',
    },
    {
      title: '分组名称',
      dataIndex: 'teamName',
    },
    {
      title: '部门名称',
      dataIndex: 'departmentName',
    },
  ];

  const cardPropsStyle = {
    height: 160
  }

  const cardProps = {
    // bordered: false
  }
  const { liveData = {}, commerceGoodsDataList = [], userInviteDataList = [], adminInviteDataList = [] } = liveDataObj
  const {
    totalViewAmount,
    afterViewAmount,
    totalViewUserAmount,
    replayAvgWatchTime = 0,
    avgWatchTime = 0,
    afterViewUserAmount,
    afterAvgWatchTime,
    liveViewAmount,
    liveViewUserAmount,
    liveAvgWatchTime,
    replayWatchTime,
    replayViewAmount,
    rewardAmount,
    rewardMoney,
    commentAmount,
    commentUserAmount,
    goodsViewUserAmount,
    goodsSaleAmount,
    goodsSaleUserAmount,
    goodsSaleMoney,
    goodsSaleReturnMoney,
    liveTime,
    goodsViewAmount
  } = liveData
  return (
    <>
      <Col style={{ overflowX: 'scroll', overflowY: 'hidden' }} span={24}>
        <Row style={{ minWidth: 1380 }}>
          <Col span={6}>
            <Card  {...cardProps} style={{ ...cardPropsStyle, background: 'rgba(224,98,13,0.2)' }}>
              <div className="Analysis_card_title Analysis_card_center">
                <Image
                  width={56}
                  height={56}
                  src={live_flow_icon || 'error'}
                  preview={false}
                  fallback=""
                />
                <div className="Analysis_card_title">直播间流量</div>
              </div>

            </Card>
          </Col>
          <Col span={18}>
            <Row>
              <Col span={6}>
                <Card  {...cardProps} style={cardPropsStyle}>
                  <div className="Analysis_card_title">
                    直播间访客人数
                    <Tooltip placement="top"
                      title={
                        <div>
                          <p>指标定义:直播创建至今,进入直播间的学员总数;</p>
                          <p>统计范围:直播创建后全时段去重规则:一个用户访问多次计为一人</p>
                        </div>}
                    >
                      <QuestionCircleOutlined style={{ marginLeft: 8 }}></QuestionCircleOutlined>
                    </Tooltip>
                  </div>
                  <div className="Analysis_less_nameMatin">{totalViewUserAmount}</div>
                </Card>
              </Col>
              <Col span={6}>
                <Card  {...cardProps} style={cardPropsStyle}>
                  <div className="Analysis_card_title">
                    直播间浏览量
                    <Tooltip placement="top"
                      title={
                        <div>
                          <p>指标定义:直播创建至今,学员访问直播间的总次数</p>
                          <p>统计范围:直播创建后全时段去重规则:一个用户访问多次计为多次
                          </p>
                        </div>}
                    >
                      <QuestionCircleOutlined style={{ marginLeft: 8 }}></QuestionCircleOutlined>
                    </Tooltip>
                  </div>
                  <div className="Analysis_less_nameMatin">{totalViewAmount}</div>
                </Card>
              </Col>
              <Col span={6}>
                <Card {...cardProps} style={cardPropsStyle}>
                  <div className="Analysis_card_title">
                    回放人均观看时长
                    <Tooltip placement="top"
                      title={
                        <div>
                          <p>回放时，学员观看回放的人均时长(学员进入直播间播放视频的时长，计入回放时长。)</p>
                          <p>统计范围：时间范围-直播回放（只统计在回放的时间）。</p>
                          <p>计算公式:所有观看回放学员的回放观看时长 ÷ 回放观看人数</p>
                        </div>}
                    >
                      <QuestionCircleOutlined style={{ marginLeft: 8 }}></QuestionCircleOutlined>
                    </Tooltip>
                  </div>
                  <div className="Analysis_less_nameMatin">{replayAvgWatchTime}</div>
                </Card>
              </Col>
              <Col span={6}>
                <Card {...cardProps} style={cardPropsStyle}>
                  <div className="Analysis_card_title">
                    人均停留时长
                    <Tooltip placement="top"
                      title={
                        <div>
                          <p>指标定义:直播创建至今,学员停留在直播间的人均时长</p>
                          <p>统计范围:直播创建后全时段去重规则:一个用户访问多次计为多次</p>
                        </div>}
                    >
                      <QuestionCircleOutlined style={{ marginLeft: 8 }}></QuestionCircleOutlined>
                    </Tooltip>
                  </div>
                  <div className="Analysis_less_nameMatin">{avgWatchTime}</div>
                </Card>
              </Col>
            </Row>
          </Col>
        </Row>
      </Col>
      <Col span={24}>
        <Row>
          <Col span={6}>
            <Card className="Analysis_card_center" style={cardPropsStyle}>
              <Image
                width={56}
                height={56}
                src={live_icon || 'error'}
                preview={false}
                fallback=""
              />
              <div className="Analysis_card_title">观看（直播+回放）</div>
            </Card>
          </Col>
          <Col span={6}>
            <Card  {...cardProps} style={cardPropsStyle}>
              <div className="Analysis_card_title">
                累计观看人数
                <Tooltip placement="top" title={<div><p>指标定义:开播后进入直播间的学员总数</p><p>统计范围:直播中+直播回放(直播开始前不会统计在内)</p><p>去重规则:一个用户访问多次计为1次</p></div>}>
                  <InfoCircleOutlined style={{ marginLeft: 8 }}></InfoCircleOutlined>
                </Tooltip>
              </div>
              <div className="Analysis_less_nameMatin">{afterViewUserAmount}</div>
            </Card>
          </Col>
          <Col span={6}>
            <Card  {...cardProps} style={cardPropsStyle}>
              <div className="Analysis_card_title">
                累计观看人次
                <Tooltip placement="top"
                  title={
                    <div>
                      <p>指标定义:开播后学员进入直播间的总次数</p>
                      <p>统计范围:直播中+直播回放(直播开始前不会统计在内)</p>
                      <p>去重规则:一个用户访问多次计为多次</p>
                    </div>}
                >
                  <InfoCircleOutlined style={{ marginLeft: 8 }}></InfoCircleOutlined>
                </Tooltip>
              </div>
              <div className="Analysis_less_nameMatin">{afterViewAmount}</div>
            </Card>
          </Col>
          <Col span={6}>
            <Card  {...cardProps} style={cardPropsStyle}>
              <div className="Analysis_card_title">
                人均观看时长
                <Tooltip placement="top"
                  title={
                    <div>
                      <p>指标定义:开播后,学员累计观看直播和回放的时长</p>
                      <p>统计范围:直播中+直播回放(直播开始前不会统计在内)</p>
                      <p>计算公式:开播后观看学员的累计观看时长➗累计观看人数</p>
                    </div>}
                >
                  <InfoCircleOutlined style={{ marginLeft: 8 }}></InfoCircleOutlined>
                </Tooltip>
              </div>
              <div className="Analysis_less_nameMatin">{afterAvgWatchTime}</div>
            </Card>
          </Col>
          <Col span={6}>
            <Card className="Analysis_card_center" style={cardPropsStyle}>
              <Image
                width={56}
                height={56}
                src={look_icon || 'error'}
                preview={false}
                fallback=""
              />
              <div className="Analysis_card_title">观看直播</div>
            </Card>
          </Col>
          <Col span={6}>
            <Card   {...cardProps} style={cardPropsStyle}>
              <div className="Analysis_card_title">
                直播观看人数
                <Tooltip placement="top"
                  title={
                    <div>
                      <p>指标定义：直播时，进入直播间的学员总数</p>
                      <p>统计范围：直播开始至直播结束去重规则:一个用户进入多次计为1次</p>
                    </div>}
                >
                  <InfoCircleOutlined style={{ marginLeft: 8 }}></InfoCircleOutlined>
                </Tooltip>
              </div>
              <div className="Analysis_less_nameMatin">{liveViewUserAmount}</div>
            </Card>
          </Col>
          <Col span={6}>
            <Card  {...cardProps} style={cardPropsStyle}>
              <div className="Analysis_card_title">
                直播观看人次
                <Tooltip placement="top"
                  title={
                    <div>
                      <p>指标定义：直播时，学员进入直播间的总次数</p>
                      <p>统计范围：直播开始至直播结束</p>
                      <p>去重规则:一个用户进入多次计为多次</p>
                    </div>}
                >
                  <InfoCircleOutlined style={{ marginLeft: 8 }}></InfoCircleOutlined>
                </Tooltip>
              </div>
              <div className="Analysis_less_nameMatin">{liveViewAmount}</div>
            </Card>
          </Col>
          <Col span={6}>
            <Card  {...cardProps} style={cardPropsStyle}>
              <div className="Analysis_card_title">
                直播人均观看时长
                <Tooltip placement="top"
                  title={
                    <div>
                      <p>指标定义：直播时，学员观看直播的人均时长</p>
                      <p>统计范围：直播开始至直播结束，“浮窗、息屏”不计入统计</p>
                      <p>计算公式：所有观看直播学员的直播观看时长 ÷ 直播观看人数</p>
                    </div>}
                >
                  <InfoCircleOutlined style={{ marginLeft: 8 }}></InfoCircleOutlined>
                </Tooltip>
              </div>
              <div className="Analysis_less_nameMatin">{liveAvgWatchTime}</div>
            </Card>
          </Col>
          <Col span={6}>
            <Card className="Analysis_card_center" style={cardPropsStyle}>
              <Image
                width={56}
                height={56}
                src={reload_icon || 'error'}
                preview={false}
                fallback=""
              />
              <div className="Analysis_card_title">观看回放</div>
            </Card>
          </Col>
          <Col span={6}>
            <Card  {...cardProps} style={cardPropsStyle}>
              <div className="Analysis_card_title">
                回放观看时长
                <Tooltip placement="top"
                  title={
                    <div>
                      <p>指标定义：回放时，播放回放视频的学员总数</p>
                      <p>统计范围：直播回放（只统计在回放的时间）</p>
                      <p>去重规则:一个用户进入多次计为1次</p>
                    </div>}
                >
                  <InfoCircleOutlined style={{ marginLeft: 8 }}></InfoCircleOutlined>
                </Tooltip>
              </div>
              <div className="Analysis_less_nameMatin">{replayWatchTime}</div>
            </Card>
          </Col>
          <Col span={6}>
            <Card  {...cardProps} style={cardPropsStyle}>
              <div className="Analysis_card_title">
                回放观看人次
                <Tooltip placement="top"
                  title={
                    <div>
                      <p>指标定义：回放时，学员播放回放视频的总次数</p>
                      <p>统计范围：直播回放（只统计在回放的时间）</p>
                      <p>去重规则:一个用户进入多次计为多次</p>
                    </div>}
                >
                  <InfoCircleOutlined style={{ marginLeft: 8 }}></InfoCircleOutlined>
                </Tooltip>
              </div>
              <div className="Analysis_less_nameMatin">{replayViewAmount}</div>
            </Card>
          </Col>
          <Col span={6}>
            <Card {...cardProps} style={cardPropsStyle}>
              <div className="Analysis_card_title">
                回放人均观看时长
                <Tooltip placement="top"
                  title={
                    <div>
                      <p>回放时，学员观看回放的人均时长(学员进入直播间播放视频的时长，计入回放时长。)</p>
                      <p>统计范围：时间范围-直播回放（只统计在回放的时间）。</p>
                      <p>计算公式:所有观看回放学员的回放观看时长 ÷ 回放观看人数</p>
                    </div>}
                >
                  <InfoCircleOutlined style={{ marginLeft: 8 }}></InfoCircleOutlined>
                </Tooltip>
              </div>
              <div className="Analysis_less_nameMatin">{replayAvgWatchTime}</div>
            </Card>
          </Col>
        </Row>
      </Col>
      <Col span={24}>
        <Spin size={'large'} spinning={loading} >
          <Space direction="vertical" style={{ width: '100%' }}>
            <div className="Analysis_searchTopBox">
              <div className="Analysis_title_box">
                在线人数趋势图
              </div>
              <Space className="Analysis_searchRight">
                <RangePicker
                  allowClear={false}
                  defaultValue={[moment(moment().subtract('7', 'day').format(dateFormat), dateFormat), moment(moment().format(dateFormat), dateFormat)]}
                  onChange={(e) => {
                    console.log(e)
                    if (!e) {
                      return fetchTrendData({})
                    } else {
                      fetchTrendData({
                        startTime: moment(e[0]).format('YYYY-MM-DD'),
                        endTime: moment(e[1]).format('YYYY-MM-DD')
                      })
                    }

                  }} />
              </Space>
            </div>
            <Line {...config} />
          </Space>
        </Spin>
      </Col>
      <Col span={24}>
        <div className="Analysis_title_box">
          直播互动
        </div>
      </Col>
      <Col span={24}>
        <Tabs defaultActiveKey="1">
          <Tabs.TabPane tab="邀约榜" key="1">
            <Space direction={'vertical'} style={{ width: '100%' }}>
              <Radio.Group onChange={(e) => { setUserRaiod(e.target.value) }} value={userRadio}>
                <Radio value={'admin'}>员工榜</Radio>
                <Radio value={'user'}>用户榜</Radio>
              </Radio.Group>
              <div>
                <TableDataBlock
                  cardProps={{ title: userRadio === 'admin' ? '直播邀请(员工)' : '直播邀请(用户)' }}
                  // searchCallback={(e) => {
                  //   console.log(e)
                  // }}
                  params={{
                    limit: 5
                  }}
                  // searchItems={searchItems}
                  columns={getUserColumns}
                  rowKey={(record) => `${record.id}`}
                  list={userRadio === 'admin' ? adminInviteDataList : userInviteDataList}
                ></TableDataBlock>

              </div>
            </Space>
          </Tabs.TabPane>
          <Tabs.TabPane tab="抽奖" key="3">
            <div className="Analysis_less_wrapper">
              <Row gutter={[18, 18]}>
                <Col span={24}>抽奖</Col>
                <Col span={6}>
                  <Card
                    style={cardPropsStyle}
                    title={
                      <div>
                        中奖人数
                      </div>}
                    bordered={false}
                  >
                    <div className="Analysis_less_name">0</div>
                  </Card>
                </Col>
                <Col span={6}>
                  <Card
                    style={cardPropsStyle}
                    title={
                      <div>
                        发奖总量

                      </div>}
                    bordered={false}
                  >
                    <div className="Analysis_less_name">0</div>
                  </Card>
                </Col>
              </Row>

            </div>
          </Tabs.TabPane>
        </Tabs>

      </Col>
      <Col span={24}>
        <div className="Analysis_title_box">
          营销配置
        </div>
      </Col>
      <Col span={24}>
        <Descriptions bordered={true} title={`直播时长 ${liveTime}`}>
          <Descriptions.Item label="打赏数量">{rewardAmount}</Descriptions.Item>
          <Descriptions.Item label="打赏金额">{rewardMoney}</Descriptions.Item>
          <Descriptions.Item label="评论数量">{commentAmount}</Descriptions.Item>
          <Descriptions.Item label="评论人数">{commentUserAmount}</Descriptions.Item>
          <Descriptions.Item label="带货商品浏览总数">
            {goodsViewAmount}
          </Descriptions.Item>
          <Descriptions.Item label="带货商品浏览人数">
            {goodsViewUserAmount}
          </Descriptions.Item>
          <Descriptions.Item label="商品销售数量">
            {goodsSaleAmount}
          </Descriptions.Item>
          <Descriptions.Item label="商品销售人数">
            {goodsSaleUserAmount}
          </Descriptions.Item>
          <Descriptions.Item label="商品销售金额">
            {goodsSaleMoney}
          </Descriptions.Item>
          <Descriptions.Item label="商品退款金额">
            {goodsSaleReturnMoney}
          </Descriptions.Item>
        </Descriptions>
      </Col>
      <Col span={24}>
        <TableDataBlock
          cardProps={{ title: '带货商品' }}
          // searchCallback={(e) => {
          //   console.log(e)
          // }}
          params={{
            limit: 5
          }}
          // searchItems={searchItems}
          columns={getColumns}
          rowKey={(record) => `${record.id}`}
          list={commerceGoodsDataList}
        ></TableDataBlock>
      </Col>

    </>



  )
}
export default connect(({ loading }) => ({
  loading: loading.effects['liveStreaming/fetchOnlineUserTrendData']
}))(LiveAnalysis);;
